<template>
    <div :class="`cb`" style="display: inline-block;border-radius: 12px;position:relative;cursor: pointer;overflow: visible;">

        <div class="bsd" style="border-radius: 13px;overflow: hidden;padding: 1px;" :style="{
            background: tool.getThemeColor('button2.outline.default'),
            color: tool.getThemeColor('button2.color.default'),
        }">
            <div style="width: 100%;height: 100%;padding: 1px;border-radius: 12px;" :style="{
                background: `linear-gradient(to bottom, ${tool.getThemeColor('button2.borderTop.default')}, ${tool.getThemeColor('button2.bg.default')})`,
            }">
                <div style="width: 100%;height: 100%;padding: 11px 15px;border-radius: 11px;" :style="{
                    background: tool.getThemeColor('button2.bg.default')
                }">
                    <slot></slot>
                </div>
            </div>
        </div>

        <div class="bsh" style="border-radius: 13px;overflow: hidden;padding: 1px;" :style="{
            border: `0px solid ${tool.getThemeColor('button2.outline.hover')}`,
            background: tool.getThemeColor('button2.outline.hover'),
            color: tool.getThemeColor('button2.color.hover'),
        }">
            <div style="width: 100%;height: 100%;padding: 1px;border-radius: 12px;" :style="{
                background: `linear-gradient(to bottom, ${tool.getThemeColor('button2.borderTop.hover')}, ${tool.getThemeColor('button2.bg.hover')})`,
            }">
                <div style="width: 100%;height: 100%;padding: 11px 15px;border-radius: 11px;" :style="{
                    background: tool.getThemeColor('button2.bg.hover')
                }">
                    <slot></slot>
                </div>
            </div>
        </div>

        <div class="bsa" style="border-radius: 13px;overflow: hidden;padding: 1px;" :style="{
            border: `0px solid ${tool.getThemeColor('button2.outline.active')}`,
            background: tool.getThemeColor('button2.outline.active'),
            color: tool.getThemeColor('button2.color.active'),
        }">
            <div style="width: 100%;height: 100%;padding: 1px;border-radius: 12px;" :style="{
                background: `linear-gradient(to bottom, ${tool.getThemeColor('button2.borderTop.active')}, ${tool.getThemeColor('button2.bg.active')})`,
            }">
                <div style="width: 100%;height: 100%;padding: 11px 15px;border-radius: 11px;" :style="{
                    background: tool.getThemeColor('button2.bg.active')
                }">
                    <slot></slot>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import tool from '../tool'

const dark = tool.getIsDarkModeFunction()

onMounted(async () => {

})

</script>

<style scoped>
.cb .bsd {
    display: inline-block;
    
}

.cb:hover .bsd {
    display: none;
}

.cb:active .bsd {
    display: none;
}

.cb .bsh {
    display: none;
    
}

.cb:hover .bsh {
    display: inline-block;

}

.cb:active .bsh {
    display: none;
}

.cb .bsa {
    display: none;
    
}

.cb:hover .bsa {
    display: none;
}

.cb:active .bsa {
    display: inline-block;
}
</style>